<script setup>
import {reactive, ref} from 'vue'
import request from '@/utils/request'
import {ElNotification} from 'element-plus'
import useSystemStore from '@/stores/system'
import router from '@/router'

import Register from '@/views/common/login/register.vue'
import Forget from '@/views/common/login/forgetpassword.vue'
import settings from "../../../utils/settings";

const $route = router
const systemStore = useSystemStore()
const formSize = ref('default')
const ruleFormRef = ref()
const captchaImg = ref()
const activeName = ref('first')
const ruleForm = reactive({
  username: '',
  password: '',
  code: '',
  token: ''
})
const show=ref(false)
// 校验规则
const rules = reactive({
  username: [
    {required: true, message: '请输入账户名', trigger: 'blur'},
    {min: 5, max: 10, message: '账户名在5到10位', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 5, max: 10, message: '密码在5到10位', trigger: 'blur'}
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'blur'},
    {min: 5, max: 5, message: '验证码为长度为5', trigger: 'blur'}
  ]
})
//登录方法
const submitForm = async (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        const res = await request.post('/auth/login', ruleForm)
        systemStore.setToken(res.data.tokenValue)
        ElNotification({
          title: '登录成功',
          message: `${ruleForm.username} 欢迎您!`,
          type: 'success'
        })

        $route.replace('/')
      } catch (error) {
        getCaptcha()
      }
    }
  })
}
//重置方法
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  getCaptcha()
}
//获取验证码
const getCaptcha = async () => {
  const res = await request.get('/auth/captcha')
  captchaImg.value = res.data.captchaImg
  ruleForm.token = res.data.token
  ruleForm.code = ''

}
getCaptcha()
setTimeout(()=>show.value = true,500)
</script>

<template>

  <div class="app_login" :style="{backgroundImage: `url(${settings.login_bg_src}`}">


    <el-row justify="center" align="middle" class="login_main">
      <el-col :span="24">
          <div class="login_main_card">
          <el-row>
            <el-col :xs="0" :sm="0" :md="0" :lg="12" :xl="12" class="login_main_col_left">
              <div class="login_main_col_left_container">
                <transition name="el-fade-in-linear">
                  <h1 v-if="show">{{ settings.login_name }}</h1>
                </transition>

              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="login_main_col_right">

              <div class="login_main_col_right_container">
                <div class="login_main_col_right_container_logo">
                  <el-avatar src="/public/logo.png"></el-avatar>
                </div>
                <h2>欢迎登录</h2>
                <div class="login_main_col_right_container_form">
                                  <el-form
                                      ref="ruleFormRef"
                                      :model="ruleForm"
                                      :rules="rules"
                                      label-width="70px"
                                      :size="formSize"
                                      status-icon
                                  >
                                    <el-form-item label="账户名" prop="username">
                                      <el-input v-model="ruleForm.username" prefix-icon="User"/>
                                    </el-form-item>
                                    <el-form-item label="密&nbsp;&nbsp;&nbsp;&nbsp;码" prop="password">
                                      <el-input
                                          v-model="ruleForm.password"
                                          prefix-icon="Lock"
                                          type="password"
                                          show-password
                                      />
                                    </el-form-item>
                                    <el-form-item label="验证码" prop="code">
                                      <el-row>
                                        <el-col :span="12">
                                          <el-input v-model="ruleForm.code" prefix-icon="Crop"/>
                                        </el-col>
                                        <el-col :span="11" :offset="1" style="display: flex; align-items: center">
                                          <img
                                              :src="captchaImg"
                                              @click="getCaptcha"
                                              style="border-radius: 3px 3px"
                                          />
                                        </el-col>
                                      </el-row>
                                    </el-form-item>


                                    <div style="display: flex; justify-content: center">
                                      <el-button type="primary" @click="submitForm(ruleFormRef)"> 立即登录</el-button>
                                      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                                    </div>
                                    <div style="display: flex; justify-content: center;margin-top: 10px">
                                      <el-button  text @click="$route.push(`/register`)"> 立即注册</el-button>
                                      <el-button type="danger"  text @click="$route.push(`/forget`)" >忘记密码？</el-button>
                                    </div>
                                  </el-form>
                </div>

              </div>
            </el-col>
          </el-row>
          </div>
      </el-col>
    </el-row>


  </div>
</template>

<style scoped lang="scss">
.app_login {
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;



  .login_main {
    height: 100vh;
    max-width: 50vw;
    min-width: 375px;
    margin: 0 auto;
    .login_main_card {
      background-color: #FFFFFF; /* 设置背景颜色为白色 */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 设置阴影 */
      border: none; /* 去掉边框 */
      border-radius: 5px; /* 可选：圆角，让卡片更有层次感 */
      overflow: hidden; /* 确保内容不会超出圆角的边界 */
    }


    .login_main_col_left {
      background-image: url("/public/ikon.jpg");
      background-repeat: no-repeat;
      background-size: cover;

      .login_main_col_left_container {

        height: 60vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        h1 {
          font-size: 60px;
          font-family: 思源黑体;
          text-align: center;
        }
      }

    }

    .login_main_col_right {
      .login_main_col_right_container {
        height: 60vh;
        width: 100%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        .login_main_col_right_container_logo{

          display: flex;

          justify-content: center;
          align-items: center;
        }
        h2 {

          text-align: center;
        }
        .login_main_col_right_container_form{
          width: 100%;
          padding: 0 30px;

        }
      }

    }
  }


}
</style>
